<template>
  <div class="segment-container">
    <!-- 多段标注 -->
    <div v-if="activeKey === 1">
      <div class="segment-box">
        <div v-for="(item, index) in props.list" :key="item.id">
          <div class="segment-item">
            <div
              :class="item.visibile ? 'item-left item item-active' : 'item-left item'"
              @click="() => LeftHooks.handleFrameClick(item)"
            >
              <div class="item-left-icon">
                <i
                  :class="item.visibile ? 'iconfont icon-xiala' : 'iconfont icon-shouqi'"
                  style="font-size: 12px"
                ></i>
              </div>
              <div class="item-left-text">
                帧段-<span v-if="index + 1 < 10">0</span>{{ index + 1 }}
              </div>
            </div>
            <div class="item-right item">
              <div
                class="item-right-icon"
                :style="{ display: !isQuery ? 'flex' : 'none' }"
              >
                <div
                  class="item-right-icon-del"
                  v-if="!isQuery && isDel"
                  @click="LeftHooks.handlePopConfirmClick"
                >
                  <a-popconfirm
                    v-model="LeftHooks.leftHooksData.popVisible"
                    content="你确定要删除吗?"
                    okText="确定"
                    cancelText="取消"
                    type="warning"
                    @ok="() => LeftHooks.handleFrameDelClick(item)"
                  >
                    <i class="iconfont icon-shanchu"></i>
                  </a-popconfirm>
                </div>
                <div
                  class="item-right-icon-eye"
                  @click="LeftHooks.handleFrameEyeClick($event, item)"
                  v-if="!isQuery && isEye"
                >
                  <i
                    :class="
                      item.eyeStatus ? 'iconfont icon-biyan1' : 'iconfont icon-biyan'
                    "
                  ></i>
                </div>
              </div>
            </div>
          </div>
          <!-- 病灶列表 -->
          <div
            class="lesion-box"
            v-if="FilmRead.dictionaryData.lesionDataList && item.visibile"
          >
            <div
              :class="
                LeftHooks.leftHooksData.currentIndex === String(t.id)
                  ? 'lesion-item active'
                  : 'lesion-item'
              "
              v-for="(t, i) in FilmRead.dictionaryData.lesionDataList[item.id]"
            >
              <div class="lesion-item-left">
                <a-tooltip :content="t.lesion + '-' + t.id" position="right" mini>
                  <div
                    class="content"
                    @click="LeftHooks.handleLesionClick(t, item.id)"
                    :style="{
                      color: t.alg ? '#d2effc' : '#faad14',
                      padding: '0 8px',
                      backgroundColor: 'transparent',
                    }"
                  >
                    {{ t.lesion }}-{{ t.id }}
                  </div>
                </a-tooltip>
              </div>
              <div class="lesion-item-right">
                <div
                  class="lesion-item-right-icon"
                  :style="{ display: !isQuery ? 'flex' : 'none' }"
                >
                  <div
                    class="lesion-item-right-icon-del"
                    v-if="!isQuery && isDel"
                    @click="LeftHooks.handlePopConfirmClick"
                  >
                    <a-popconfirm
                      v-model="LeftHooks.leftHooksData.popVisible"
                      content="你确定要删除吗?"
                      okText="确定"
                      cancelText="取消"
                      type="warning"
                      @ok="() => LeftHooks.handleSecondClick(t, item.id)"
                    >
                      <i class="iconfont icon-shanchu"></i>
                    </a-popconfirm>
                  </div>
                  <div
                    class="lesion-item-right-icon-eye"
                    @click="LeftHooks.handleLesionEyeClick(t, $event, true, item.id)"
                    v-if="!isQuery && isEye"
                  >
                    <i
                      :class="
                        t.eyeStatus ? 'iconfont icon-biyan1' : 'iconfont icon-biyan'
                      "
                    ></i>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 单帧标注 -->
    <div v-if="activeKey === 2">
      <div class="single-box">
        <div class="lesion-box" v-if="FilmRead.dictionaryData.lesionDataList">
          <div
            :class="
              LeftHooks.leftHooksData.currentIndex === String(t.id)
                ? 'lesion-item active'
                : 'lesion-item'
            "
            v-for="(t, i) in FilmRead.dictionaryData.lesionDataList[0]"
          >
            <div class="lesion-item-left">
              <a-tooltip :content="t.lesion + '-' + t.id" position="right" mini>
                <div
                  class="content"
                  @click="LeftHooks.handleLesionClick(t, 0)"
                  :style="{
                    color: '#faad14',
                    padding: '0 8px',
                    backgroundColor: 'transparent',
                  }"
                >
                  <!-- :style="{ color: t.alg ? '#d2effc' : '#faad14' }" -->
                  {{ t.lesion }}-{{ t.id }}
                </div>
              </a-tooltip>
            </div>
            <div class="lesion-item-right">
              <div
                class="lesion-item-right-icon"
                :style="{ display: !isQuery ? 'flex' : 'none' }"
              >
                <div
                  class="lesion-item-right-icon-del"
                  v-if="!isQuery && isDel"
                  @click="LeftHooks.handlePopConfirmClick"
                >
                  <a-popconfirm
                    v-model="LeftHooks.leftHooksData.popVisible"
                    content="你确定要删除吗?"
                    okText="确定"
                    cancelText="取消"
                    type="warning"
                    @ok="() => LeftHooks.handleSecondClick(t, 0)"
                  >
                    <i class="iconfont icon-shanchu"></i>
                  </a-popconfirm>
                </div>
                <div
                  class="lesion-item-right-icon-eye"
                  @click="LeftHooks.handleLesionEyeClick(t, $event, false, 0)"
                  v-if="!isQuery && isEye"
                >
                  <i
                    :class="t.eyeStatus ? 'iconfont icon-biyan1' : 'iconfont icon-biyan'"
                  ></i>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts" name="VideoComp">
import { inject } from "vue";
import * as Store from "@/store";
import type * as FileReadApiType from "@/api/filmRead/filmRead.d";
interface Props {
  list: FileReadApiType.GroupViewItem[] | undefined;
  isEye: boolean;
  isColor: boolean;
  isDel: boolean;
  LeftHooks: Left.LeftHooks;
  type: string;
  activeKey?: number;
}
const props = defineProps<Props>();
const FilmRead = Store.useFilmRead();
const isCreate = inject<boolean>("isCreate");
const isQuery = inject<boolean>("isQuery");
const isEdit = inject<boolean>("isEdit");
// console.log(props.activeKey, "超声视频病灶组件");
</script>

<style scoped lang="less">
.segment-container {
}

.segment-item {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-around;
  user-select: none;
  .item-active {
    .item-left {
      &-icon,
      &-text {
        color: #13fffb;
      }
    }
  }
}
.item {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 5px;
  user-select: none;
}
.item-left {
  font-size: 12px;
  user-select: none;
  cursor: pointer;
  &-icon {
    margin-right: 6px;
    user-select: none;
  }
  &-text {
    // font-size: 12px;
    font-weight: 400;
  }
  &-icon:hover,
  &-text:hover {
    color: #13fffb;
    cursor: pointer;
  }
}
.item-right-icon {
  user-select: none;
  &-del {
    user-select: none;
    margin-right: 5px;
  }
  &-del:hover,
  &-eye:hover {
    color: #13fffb;
    cursor: pointer;
  }
  i {
    font-size: 12px;
  }
}

.lesion-item {
  font-size: 12px;
  display: flex;
  align-items: center;
  padding-left: 40px;
  justify-content: space-between;
  height: 34px;
}
.lesion-item.active {
  // color: #13fffb;
  background-color: #28353c;
  .content {
    color: #13fffb !important;
  }
}
.lesion-item-left {
  // padding-left: 25px;
  // width: 90px;
  // max-width: 90px;
  // text-overflow: ellipsis;
  // word-spacing: normal;
  // overflow: hidden;
  // white-space: nowrap;
  cursor: pointer;
  .content {
    max-width: 88px;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
  }
  .content:hover {
    color: #13fffb;
  }
}
.lesion-item-right {
  padding-right: 22px;
}
.lesion-item-right-icon {
  cursor: pointer;
  &-del {
    margin-right: 6px;
  }
  i {
    font-size: 12px;
  }
  &-del:hover,
  &-eye:hover {
    color: #13fffb;
    cursor: pointer;
  }
}
</style>
